<template>
  <div class="list-item flex column gap5 p10"
    :class="[item.status, { 'check': selectTaskGidList.indexOf(item.gid) > -1 }]" @click="checkItem">
    <div class="detail flex jcsb gap5">
      <div class="name two">
        {{ getTaskName(item) }}
      </div>
      <div class="item-btns flex aic">
        <el-tooltip class="item" content="开始下载" placement="bottom">
          <div class="item" @click.stop="startOne" v-show="item.status === 'paused'">
            <i class="iconfont icon-ETL-kaishi"></i>
          </div>
        </el-tooltip>
        <el-tooltip class="item" content="暂停下载" placement="bottom">
          <div class="item" @click.stop="stopOne" v-show="item.status === 'active'">
            <i class="iconfont icon-zanting"></i>
          </div>
        </el-tooltip>
        <el-tooltip class="item" content="删除" placement="bottom">
          <div class="item" @click.stop="deleteOne">
            <i class="iconfont icon-close"></i>
          </div>
        </el-tooltip>
        <el-tooltip class="item" content="打开所在文件夹" placement="bottom">
          <div class="item" @click.stop="openDir">
            <i class="iconfont icon-file"></i>
          </div>
        </el-tooltip>
        <el-tooltip class="item" content="复制链接" placement="bottom">
          <div class="item" @click.stop="copyLink">
            <i class="iconfont icon-accessory"></i>
          </div>
        </el-tooltip>
        <!-- <el-tooltip class="item" content="信息" placement="bottom">
          <div class="item" @click.stop="openInfo">
            <i class="iconfont icon-info"></i>
          </div>
        </el-tooltip> -->
      </div>
    </div>
    <div class="progress">
      <el-progress :percentage="getProgress(item)" :stroke-width="5" />
    </div>
    <div class="fileInfo flex aic gap20">
      <span>{{ bytesToSize(item.completedLength) }} / {{ bytesToSize(item.totalLength) }}</span>
      <span> 速度： {{ bytesToSize(item.downloadSpeed) }} /s</span>
    </div>
  </div>
</template>

<script setup>
import { useTaskStore } from "@/store/taskStore.js"

import { checkTaskIsSeeder, getTaskName, bytesToSize, getTaskUri } from "@/utils/index"
import { storeToRefs } from "pinia"
import { inject } from "vue"
import { ElMessage, ElMessageBox } from "element-plus";
const taskStore = useTaskStore()

const { selectTaskGidList } = storeToRefs(taskStore)

const params = inject('params')

const props = defineProps({
  item: {
    type: Object,
    default() {
      return {}
    }
  }
})

const checkItem = () => {
  let index = selectTaskGidList.value.indexOf(props.item.gid)
  if (index > -1) {
    selectTaskGidList.value.splice(index, 1)
  } else {
    selectTaskGidList.value.push(props.item.gid)
  }
}

const getProgress = (item) => {
  console.log(Number(item.completedLength), Number(item.totalLength))
  if (item.completedLength + '' === '0') {
    return 0
  } else {
    return Math.ceil(Number(item.completedLength) / Number(item.totalLength))
  }
}

const startOne = () => {
  console.log('props.item.gid', props.item.gid)
  taskStore.startOne({
    gid: props.item.gid
  })
}

const stopOne = () => {
  taskStore.stopOne({
    gid: props.item.gid
  })
}

const deleteOne = () => {
  taskStore.deleteTask(params.value, props.item)
}

const openDir = () => {
  taskStore.openDirectory(props.item.dir)
}

const copyLink = () => {
  const uri = getTaskUri(props.item)
  navigator.clipboard.writeText(uri)
    .then(() => {
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    })
}
</script>

<style lang="scss" scoped>
.list-item {
  width: 100%;
  // height: 150px;
  border-radius: 16px;
  @include background_color("down_list_item");
  border: 1px solid;
  @include border_color("down_list_item_border");
  box-sizing: border-box;
  @include font_color("font_content");
  font-size: 14px;
  margin-bottom: 10px;

  &.paused {
    @include border_color("paused_color");
  }

  &.active {
    @include border_color("active_color");
  }

  &.check {
    @include border_color("font_link");
  }

  &:hover {
    @include border_color("font_link");
  }

  .name {
    word-wrap: break-word;
    word-break: break-all;
  }

  .item-btns {
    width: fit-content;
    padding: 5px 10px;
    // @include background_color("font_base_in");
    @include font_color("font_content");
    border-radius: 16px;
    margin-bottom: 10px;
    border: 1px solid;
    @include border_color("down_list_item_border2");
    cursor: pointer;

    &:hover {
      @include font_color("font_base_in");
      @include background_color("font_link");
    }

    .item {
      width: 25px;
      height: 20px;
      line-height: 20px;
      text-align: center;
    }
  }

  .progress {
    margin-top: 10px;
  }
}
</style>